<script setup lang="ts">
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import SwiperCore from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Navigation, Pagination } from "swiper/modules";

defineOptions({
  name: "Swiper"
});

SwiperCore.use([Autoplay, Navigation, Pagination]);

const swiperExample = {
  id: 7,
  label: "无限循环",
  options: {
    autoplay: {
      delay: 6000,
      disableOnInteraction: false
    },
    navigation: true,
    pagination: {
      clickable: true
    },
    loop: true
  }
};
</script>

<template>
  <div class="swiper-box">
    <swiper v-bind="swiperExample.options">
      <swiper-slide>
        <div
          class="flex justify-center items-center h-[600px] border border-[#999]"
        >
          <img class="swiper-img" src="@/assets/haohan/code.jpg" alt="" />
          <div class="swiper-slide-title">
            <h1>安全来源于知己</h1>
            <p>
              面向通信行业网络安全等级保护合规建设及安全运营服务的综合解决方案
            </p>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div
          class="flex justify-center items-center h-[600px] border border-[#999]"
        >
          <img class="swiper-img" src="@/assets/haohan/keybord.png" alt="" />

          <div class="swiper-slide-title">
            <h1>政府解决方案</h1>
            <p>
              快速有效地发现敏感数据资产，对数据实施分类分级，通过采取相应的产品和技术措施保护数据资产安全，全面风险分析研判，安全事件应急响应，为政府领域的数字化转型保驾护航。
            </p>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div
          class="flex justify-center items-center h-[600px] border border-[#999]"
        >
          <img class="swiper-img" src="@/assets/haohan/xuhuan.png" alt="" />

          <div class="swiper-slide-title">
            <h1>金融行业解决方案</h1>
            <p>筑牢数据安全地基，助推金融行业数字化转型</p>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<style scoped lang="scss">
.swiper-box {
  // height: 400px;

  .swiper-img {
    width: 100%;
    height: 100%;
  }

  .swiper-slide-title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999999;
    width: 100%;
    height: 100%;
    color: #fff;
    background: rgba(51, 51, 51, 0.534);
    text-align: center;
    line-height: 80px;
    h1 {
      font-size: 50px;
      margin-top: 12%;
    }

    p {
      font-size: 20px;
      margin-top: 1%;
      font-weight: 700;
    }
  }
}
</style>
